<template>
    <div>
        <div class="lian_box">
            <p style="color: red;font-size: 22px;">第{{ assessList.phase }}期</p>
            <h1>{{ assessList.title }}</h1>
            <p>测评时间：{{ assessList.start_time }} 至 {{ assessList.end_time }}</p>
            <p class="p1">我的本期最高分数：<span>{{ assessList.score }}</span></p>
        </div>
        <div class="lian_boss">
            <p v-for="(item, index) in hqa">{{ item }}</p>
        </div>
        <div style="display: flex;justify-content: center;">
            <button class="butt" style="cursor: pointer;" @click="open(assessList.assess_id)">{{ assessList.status == 0
                ?
                '开始'
                : assessList.status == 1 ? '未开始' : '已结束'
                }}</button>
        </div>
        <div class="p2">剩余测评次数：{{ assessList.chance }}</div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { assess } from '@/api/team'
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
let Router = useRouter()
let assessList: any = ref({
    phase: '',
    assess_id: '',
    rule: '',
    title: '',
    chance: '',//机会
    end_time: '',
    score: '',
    start_time: '',
    status: ''
})
let hqa = ref()
const hqassess = () => {
    assess().then(res => {
        if (res.data.code == 1) {
            console.log(res.data, 'ssss')
            assessList.value = res.data.data
            hqa.value = res.data.data.rule.split('\n')
            console.log(hqa.value, '\n')
        } else {
            return ElMessage.error('测评已结束')
        }
    })
}
hqassess()
const open = (id: any) => {
    if (assessList.value.status == 0) {
        Router.push({ path: '/home/openceshi', query: { id } })
    } else if (assessList.value.status == 1) {
        return ElMessage.error('测评还未开始')
    } else if (assessList.value.status == 2) {
        return ElMessage.error('测评已结束')
    }
}
</script>

<style lang="scss" scoped>
.lian_box {
    margin-top: 100px;
    margin-left: 32px;
    text-align: center;

    p {
        margin: 20px 0;
    }

    .p1 {
        font-weight: 800;

        span {
            color: #E02020;
            font-size: 36px;
        }
    }

}

.p2 {
    text-align: center;
    color: #E02020;
    margin-top: 20px;
}

.lian_boss {
    width: 640px;
    height: 300px;
    background: #FFF4F4;
    margin: 60px auto;
    // overflow: auto;
    padding: 10px 0;

    p {
        line-height: 15px;
        margin: 15px;
    }
}

.butt {
    width: 240px;
    height: 60px;
    background: #E02020;
    color: #fff;
    border-radius: 35px;
    border: none;
    font-size: 22px;
}
</style>